<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">诊所管理</el-breadcrumb-item>
      <el-breadcrumb-item>微信管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="box">
      <el-form label-width="130px" :model="editForm" ref="editForm">
        <el-form-item label="个人页面滚动通知" prop="title">
          <textarea placeholder="请输入个人页面滚动通知内容" class="el-textarea__inner" v-model="editForm.wxNotice" style="min-height: 66px; height: 100px;"></textarea>
        </el-form-item>
        <el-form-item label="预约页面滚动通知" prop="title">
          <textarea placeholder="请输入预约页面滚动通知内容" class="el-textarea__inner" v-model="editForm.wxAppointmentNotice" style="min-height: 66px; height: 100px;"></textarea>
        </el-form-item>
        <el-form-item label="温馨提示" prop="content">
          <textarea placeholder="请输入微信温馨提示内容" class="el-textarea__inner" v-model="editForm.wxReminder" style="min-height: 66px; height: 150px;"></textarea>
        </el-form-item>
        <el-form-item label="预约支付金额" prop="content">
          <el-input size="medium" v-model="editForm.wxPayPrice" auto-complete="off" placeholder="请输入预约支付金额"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-left: 595px" size="medium" type="primary" :loading="saveLoading" class="title" @click="updateForm()">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {getSystemInformation, updateSystemInformation} from "../../api";

export default {
  data() {
    return {
      editForm: {},
      saveLoading: false
    }
  },
  created() {
    this.getData()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    getData() {
      getSystemInformation()
        .then(res => {
          this.editForm = res.result
        })
        .catch(err => {
          this.$message.error('信息加载失败，请稍后再试！')
        })
    },
    updateForm: function () {
      let _this = this
      updateSystemInformation(this.editForm)
        .then(res => {
          this.saveLoading = true
          if (res.result === true) {
            _this.$message({
              type: 'success',
              message: '修改成功！'
            })
            _this.saveLoading = false
          }
        })
        .catch(err => {
          this.$message.error('信息更新失败，请稍后再试！')
        })
    }
  },
  filters: {
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.box{
  margin-top: 20px;
  max-width: 680px;
  padding: 30px 65px 30px 25px;
  background-color: #f6f6f6;
  box-shadow: 0px 0px 8px 3px rgba(0,0,0,.1);
  border-radius: 5px;
}
.box ul {
  list-style-type: none;
}
</style>

